<script lang="ts" setup name="ArticleList">
import { Article } from '@/class/Article';
import router, { RouterName } from '@/router';
import { onMounted, reactive, ref } from 'vue';
import ArticleCard from "../article/ArticleCard.vue"
    let article_Data=reactive<Article[]>([]);
    let article_Count=ref(0);
    let article_currentPage=ref(1)
    let article_pageSize=ref(5)

    let ArticleList_props_Data = reactive( {
        current_path: '/index/information'
    })
    onMounted(async ()=>{
      article_Count.value  = await Article.getArticleCount();
      if(article_Count.value!==0&&Math.ceil(article_Count.value/article_pageSize.value)<article_currentPage.value){
        article_currentPage.value=article_currentPage.value-1
      }
      getArticleByPage()
    })
    async function getArticleByPage(){
      let dataList = await Article.getArticleByPage(article_currentPage.value, article_pageSize.value)
      article_Data.splice(0,article_Data.length)
      article_Data.push(...dataList)
    }
    function addArticle(){
      router.push({
        name:RouterName.ArticleEdit
      })
    
    }
</script>
<template>
    <div class="Information">
      <div class="Function" style="line-height: 50px">
        <el-button type="primary" @click="addArticle">
          <el-icon ><DocumentAdd /></el-icon>
        </el-button>
      </div>
      <section>
        <ArticleCard
            :ArticleList_props_Data="ArticleList_props_Data"
            :project_article_Data="article_Data"
        ></ArticleCard>
        <!--      //给子组件传值-->
        <!--  </div>-->
      </section>
      <el-pagination
          :page-size.sync="article_pageSize"
          :pager-count="11"
          :current-page="article_currentPage"
          layout="prev, pager, next"
          :total="article_Count"
          @current-change="getArticleByPage"
      >
      </el-pagination>
<!--      <article-edit></article-edit>-->

    </div>
</template>
<style>

</style>